<template>

  <div class="container">

    <!--工具简介-->
    <div class="tools-intro" :style="{backgroundImage:'url('+require('../assets/banner-tools.png')+')'}" style=" background-size:100% 100%;">
      <div style="width: 1600px; align-items: center; margin: 0 auto; " >
        <el-image style="width: 100px; height: 100px; float: left" :src="require('@/assets/icon/UUID.svg')"></el-image>
        <div style="position: relative;  left: 40px">
          <p style="font-size: 25px; font-weight: 600">UUID生成器</p>
          <p>UUID生成器基于vue-uuid实现</p>

        </div>

      </div>


    </div>

    <div style="width:1600px; margin:40px auto">
      <h3>操作区</h3>
      <el-button @click="getUUID" type="primary">生成UUID</el-button>
      <el-radio v-model="UUIDVersion" label="1" style="margin-left: 20px">V1</el-radio>
      <el-radio v-model="UUIDVersion" label="4">V4</el-radio>

    </div>

    <!--代码框-->
    <div style="width: 1600px;display: flex; justify-content: space-between;">

      <div style="width: 49%">
        <h3>UUID版本介绍</h3>
        <h4>V1</h4>
        48bit 主机的 Mac 地址
        60bit 时间戳 (13-14bit 作为时间序列)
        每个节点每秒钟可生成 1630 亿个，也就是说每毫秒 163 个
        <h4>V4(推荐)</h4>
        6bit 标记版本
        122bit 随机数
        每秒生成 10 亿个，大约需要 85 年才有重复的可能，所以在正常应用情形下这种碰撞概率可以忽略


      </div>

      <div style="width: 49%">
        <h3>UUID生成框</h3>
        <el-input class="inputCode" v-model="UUID"
                  type="textarea"
                  :rows="20"></el-input>

      </div>
    </div>





  </div>
</template>

<script>


import {Message} from "element-ui";
import { uuid } from 'vue-uuid';
export default {
  name: "XmlTools",
  data(){
    return{

      UUID:'',
      UUIDVersion: '4'

    }
  },
  methods:{

    getUUID(){
      switch (this.UUIDVersion){
        case '1':
          this.UUID = uuid.v1()
          break;
        case '4':
          this.UUID = uuid.v4()
          break;

      }

    },





    onCopy: function () {
      Message.success("已拷贝至剪贴板！")
      // alert('You just copied: ' + e.text)
    },
    onError: function () {
      Message.warning("拷贝失败，请确认格式化区域是否有内容")

    },


  }
}
</script>

<style scoped>
.container{
  text-align: left;
  display: flex;
  flex-direction: column;
  /*justify-content: center;    !* 垂直居中 *!*/
  align-items: center;        /* 水平居中 */
  background: #FAFCFF;
  height: 100%;
}


.tools-intro{

  width: 100%;
  height: 200px;
  box-shadow: 0px 0px 40px 0px rgb(217, 224, 234);


}



/deep/ .el-textarea__inner {
  font-family: sans-serif !important;

}

/deep/.el-button.el-button--primary{
  background:#4154F1
}

/deep/.el-button.el-button--success{
  background:#28bd6c
}



</style>
